<template>
	<transition name="slide">
  	<music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>
	
<script>
import { mapGetters } from 'vuex'
import { ERR_OK } from 'api/config'
import { getSingerDetail,getSongVkey } from 'api/singer'
import { createSong } from 'common/js/song'
import MusicList from 'components/music-list/music-list'

export default {
	components: {
		MusicList
	},
	computed: {
		title() {
			return this.singer.name
		},
		bgImage() {
			return this.singer.avatar
		},
		...mapGetters([
				'singer'
			])
	},
	data () {
		return {
			songs: []
		}
	},
	created () {
		this._getSingerDetail()
	},
	methods: {
		_getSingerDetail () {
			if (!this.singer.id) {
				this.$router.push('/singer')
				return
			}
			getSingerDetail(this.singer.id).then((res) => {
				if (res.code === ERR_OK) {
					this.songs = this._normalizeSongs(res.data.list)
					console.log(this.songs)
				}
			})
		},
		_normalizeSongs (list) {
		  let ret = []
		  list.forEach((item) => {
		    let {musicData} = item
		    getSongVkey(musicData.songmid).then((res) => {
		      // console.log('这首歌的vkey获取到了')
		      const vkey = res.data.items[0].vkey
		      if (musicData.songid && musicData.albummid) {
		        ret.push(createSong(musicData, vkey))
		      }
		    })
		  })
		  return ret
		}
	}
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
		
	.slide-enter-active, .slide-leave-active
		transition: all 0.3s
	.slide-enter, .slide-leave-to
		transform: translate3d(100%, 0, 0)
</style>
